<!--导入栏位配置-->
<template>
  <div class="page">
    <data-box ref="databox" :params="params" :server="server.search" row-key="id" autoSearch>
      <template slot="input">
        <el-form-item label="栏位名称" v-role="0x080401" prop="name">
          <el-input v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item label="栏位编号" v-role="0x080402" prop="code">
          <el-input v-model="params.code"></el-input>
        </el-form-item>
      </template>
      <!--按钮区域-->
      <template slot="button">
        <el-button @click="dialog.addTemplate = true" v-role="0x080403">新增模板</el-button>
      </template>

      <!--数据列区域-->
      <template slot="column">
        <el-table-column width="40" type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="栏位名称" min-width="90">
        </el-table-column>
        <el-table-column prop="code" label="栏位编号" min-width="90">
        </el-table-column>
        <el-table-column prop="type" label="类型" min-width="90">
        </el-table-column>
        <el-table-column prop="length" label="长度" min-width="100">
        </el-table-column>
        <el-table-column prop="creator" label="操作人" min-width="100">
        </el-table-column>
        </el-table-column>
        <el-table-column min-width="180" prop="createTime" label="操作时间">
        </el-table-column>
        <el-table-column prop="cupoName" label="操作" min-width="90">
          <template scope="scope">
            <el-button @click="updateClick(scope)" type="text" size="small" v-role="0x080404">修改</el-button>
            <el-button @click="deleteClick(scope)" type="text" size="small" v-role="0x080405">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!--增加模板区域-->
    <el-dialog title="增加模板" v-model="dialog.addTemplate" size="small" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-row>
        <component :is="radio" @success="refreshData" @close="dialog.addTemplate=false">
        </component>
      </el-row>
    </el-dialog>

    <!--修改模板区域-->
    <el-dialog @open="updateTemplateData" title="修改模板" v-model="dialog.updateTemplate" size="small" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-row>
        <component ref="template-data" :is="radio" @success="refreshData" @close="dialog.updateTemplate=false">
        </component>
      </el-row>
    </el-dialog>
  </div>
</template>


<script>
  import DataBox from '@/components/DataBox'
  import servers from '@/config/servers'
  import net from '@/util/net'
  import ExcelDataTemplate from '@/views/config-manage/ExcelDataTemplate'
  // import { templateType } from '@/config/enum'

  export default {
    name: 'data-template',
    componentName: 'DataTemplate',
    data() {
      return {
        server: {
          search: servers.ConfigManage.get_all_excel_data,
          delete: servers.ConfigManage.delete_excel_data
        },
        params: {
          id: '',
          name: '',
          code: '',
          type: '',
          length: '',
          sort: 'code,desc'
        },
        radio: 'ExcelDataTemplate',
        selectData: {},
        dialog: {
          addTemplate: false,
          updateTemplate: false
        }
      }
    },

    methods: {
      updateTemplateData() {
        this.$nextTick(() => {
          this.$refs['template-data'].updateData(this.selectData)
        })
      },
      /**
       * 修改模版
       */
      updateClick(scope) {
        // 获取需要修改的模版类型
        // let style = scope.row.style
        // this.modifyTemp = templateType[style].code
        this.selectData = scope.row
        this.dialog.updateTemplate = true
      },
      /**
       * 删除模版
       */
      deleteClick(scope) {
        console.log(scope.row)
        this.$confirm('您确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送删除数据请求
          net.send({
            server: this.server.delete,
            append: [scope.row.id]
          }).then((data) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 更新数据信息
            this.refreshData()
          }, ({ reason }) => {
            this.$message({
              type: 'info',
              message: reason
            })
          })
        })
      },
      /**
       * 刷新列表数据
       */
      refreshData() {
        this.$refs['databox'].refresh()
      }
    },
    components: {
      DataBox,
      ExcelDataTemplate
    },
    filters: {
      getType(value) {
        switch (value) {
          case '0':
            return 'String'
          case '1':
            return 'Integer'
          case '2':
            return 'Date'
          case '3':
            return 'TimeStamp'
          case '4':
            return 'Boolean'
          default:
            return ''
        }
      }
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


</style>
